import {TabBar} from 'antd-mobile';
import React, {Component} from 'react';

import Home from "../home/home";
import Idea from "../idea/idea";
import Market from "../market/market";
import Message from "../message/message";
import Mine from "../mine/mine";

import index from '../../libs/icons/tabs/index.svg';
import idea from '../../libs/icons/tabs/idea.svg';
import market from '../../libs/icons/tabs/market.svg';
import message from '../../libs/icons/tabs/message.svg';
import mine from '../../libs/icons/tabs/mine.svg';
import selectindex from '../../libs/icons/tabs/selectindex.svg'
import selectidea from '../../libs/icons/tabs/selectidea.svg'
import selectmarket from '../../libs/icons/tabs/selectmarket.svg'
import selectmessage from '../../libs/icons/tabs/selectmessage.svg'
import selectmine from '../../libs/icons/tabs/selectmine.svg';

export default class Main extends Component {
    constructor(props) {
        super(props);
        this.state = {
            selectedTab: 'Home',
            hidden: false,
            fullScreen: false,
        };
    }

    render() {
        return (
            <div style={{
                position: 'fixed',
                height: '100%',
                width: '100%',
                top: 0
            }}>
                <TabBar
                    unselectedTintColor="#949494"
                    tintColor="#33A3F4"
                >
                    <TabBar.Item
                        title="首页"
                        key="首页"
                        icon={index}
                        selectedIcon={selectindex}
                        selected={this.state.selectedTab === 'Home'}
                        onPress={() => {
                            this.setState({
                                selectedTab: 'Home',
                            });
                        }}
                    >
                        <Home/>
                    </TabBar.Item>
                    <TabBar.Item
                        icon={idea}
                        selectedIcon={selectidea}
                        title="想法"
                        key="想法"
                        selected={this.state.selectedTab === 'Idea'}
                        onPress={() => {
                            this.setState({
                                selectedTab: 'Idea',
                            });
                        }}
                    >
                        <Idea/>
                    </TabBar.Item>
                    <TabBar.Item
                        icon={market}
                        selectedIcon={selectmarket}
                        title="市场"
                        key="市场"
                        selected={this.state.selectedTab === 'Market'}
                        onPress={() => {
                            this.setState({
                                selectedTab: 'Market',
                            });
                        }}
                    >
                        <Market/>
                    </TabBar.Item>
                    <TabBar.Item
                        icon={message}
                        selectedIcon={selectmessage}
                        title="消息"
                        key="消息"
                        selected={this.state.selectedTab === '消息'}
                        onPress={() => {
                            this.setState({
                                selectedTab: '消息',
                            });
                        }}
                    >
                        <Message/>
                    </TabBar.Item>
                    <TabBar.Item
                        icon={mine}
                        selectedIcon={selectmine}
                        title="我的"
                        key="我的"
                        selected={this.state.selectedTab === '我的'}
                        onPress={() => {
                            this.setState({
                                selectedTab: '我的',
                            });
                        }}
                    >
                        <Mine/>
                    </TabBar.Item>
                </TabBar>
            </div>
        );
    }
}
